// 企业设置
<template>
    <div class="mainmanag">
      <div class="install-title">
        <div>
          {{titileName}}
          <!-- 修改完成后，绑定找回密码的手机号会修改为新手机号 -->
        </div>
      </div>
      <div class="install-main" v-show="mainmanagFisterShow">
        <div>
          <div class="mainmanag-list">
            <div>
             <small>*</small> 当前绑定伯通账号：
            </div>
            <div>
              {{userNameVal}}
            </div>
          </div>
          <div class="mainmanag-list">
            <div>
             <small>*</small> 手机号：
            </div>
            <div class="mainmanagList-phone">
              {{currentPhoneVal}}
            </div>
            <v-reciprocaltime :start="start" @countDown="start=false" @click.native='sendFisterCodeClick'></v-reciprocaltime>
          </div>
          <div class="mainmanag-list">
            <div>
             <small>*</small> 验证码：
            </div>
            <div class="mainmanagList-inputCode">
              <input type="text" placeholder="请填写验证码" maxlength="6" v-model="codeVal" :class="{'blueBorder': isBlueCodeVal,'grayBorder': isGrayCodeVal}">
            </div>
            <div :class="{'blueTostBorder': isBlueCodeVal,'grayTostBorder': isGrayCodeVal}">
              验证码为六位数字
            </div>
          </div>
          <div class="mainmanag-but">
            <!-- <div @click="filterClick">下一步</div> -->
            <el-button type="primary" size="medium" @click="filterClick">下一步</el-button>
          </div>
        </div>
      </div>
      <div class="install-main" v-show="!mainmanagFisterShow">
        <div>
          <div class="mainmanag-list">
            <div>
             <small>*</small> 绑定伯通账号：
            </div>
            <div class="mainmanagList-inputPhone">
              <input type="text" placeholder="请输入手机号" maxlength="11" @keyup="keyupphoneClick" v-model="phoneVal">
              <div class="inputPhoneList" v-show="inputPhoneListShow">
                <ul>
                  <li class="inputPhoneLi" v-for="(item,index) in phoneLists" :key="index" @click="selectAccountClick(index)">
                    <div>
                      {{item.memberName}}
                    </div>
                    <div>
                      手机号：{{item.mobile}}
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="mainmanag-list">
            <div>
             <small>*</small> 手机号：
            </div>
            <div class="mainmanagList-phone">
              {{mobileVal}}
            </div>
            <v-reciprocaltime v-show="isReciprocaltimeShow" :start="startTwo" @countDown="start=false" @click.native='sendTwoCodeClick'></v-reciprocaltime>
          </div>
          <div class="mainmanag-list">
            <div>
             <small>*</small> 验证码：
            </div>
            <div class="mainmanagList-inputCode">
              <input type="text" placeholder="请填写验证码" maxlength="6" v-model="twoCodeVal" :class="{'blueBorder': isBlueCodeVal,'grayBorder': isGrayCodeVal}">
            </div>
            <div :class="{'blueTostBorder': isBlueCodeVal,'grayTostBorder': isGrayCodeVal}">
              验证码为六位数字
            </div>
          </div>
          <div class="mainmanag-but">
            <!-- <div @click="saveClick">完成</div> -->
            <el-button type="primary" size="medium" @click="saveClick">完成</el-button>
          </div>
        </div>
      </div>
    </div>
</template>
<script>
import { mapActions } from "vuex";
import reciprocalTime from "../../cModel/reciprocalTime.vue"; // 引入倒计时组件
export default {
  components: { "v-reciprocaltime": reciprocalTime },
  data() {
    return {
      isReciprocaltimeShow: false,
      titileName: "换绑主管理账号，需要验证当前主管理账号的身份", // title名称
      mainmanagFisterShow: true, //步骤显示
      phoneVal: "", // 搜索人
      inputPhoneListShow: false, // 控制搜索人显示
      phoneLists: [], // 第二步搜索人名单
      currentPhoneVal: "", // 当前手机号
      codeVal: "", // 验证码
      twoCodeVal: "", // 验证码
      isBlueCodeVal: false,
      isGrayCodeVal: true,
      sendFisterCodeClickTrueOrFalse: true,
      sendTwoCodeClickTrueOrFalse: true,
      filterClickTrueOrFalse: true,
      saveClickTrueOrFalse: true,
      selectAccountClickTrueOrFalse: true,
      start: false,
      startTwo: false,
      OrgOBj: {},
      userNameVal: "",
      mobileVal: "",
      memberIdsVal: "",
      adminTypeVal: "",
      scopeTypeVal: "",
      appIdsVal: "",
      sourceIdsVal: "",
      subDataVal: "",
      time: 60
    };
  },
  filters: {},
  created: function() {
    var self = this;
    self.currentPhoneVal = sessionStorage.getItem("mobile");
    self.userNameVal = sessionStorage.getItem("memberName");
    var accessToken = sessionStorage.getItem("accessToken");
    if (accessToken) {
    }
  },
  watch: {
    mobileVal(val) {
      if (val.length > 0) {
        this.isReciprocaltimeShow = true;
      } else {
        this.isReciprocaltimeShow = false;
      }
    }
  },
  methods: {
    // 手机号码搜索
    keyupphoneClick() {
      if (this.phoneVal.length > 0) {
        this.inputPhoneListShow = true;
        this.memberLists();
      } else {
        this.inputPhoneListShow = false;
      }
    },
    // 第一步发送短信验证码
    sendFisterCodeClick() {
      var self = this;
      if (self.sendFisterCodeClickTrueOrFalse == true) {
        self.sendFisterCodeClickTrueOrFalse = false;
        self.time = 60;
        let time = setInterval(() => {
          self.time--;
          if (self.time == 0) {
            self.sendFisterCodeClickTrueOrFalse = true;
            clearInterval(time);
          }
        }, 1000);
        self
          .getapiSettingSendCode({
            phoneNumber: self.currentPhoneVal
          })
          .then(data => {
            if (data.statusCode == 200) {
              self.$message({
                type: "success",
                message: "发送成功"
              });
              self.start = true;
            } else {
              self.$message({
                type: "info",
                message: "发送频繁请稍后再发送"
              });
              clearInterval(time);
              self.sendFisterCodeClickTrueOrFalse = true;
            }
          })
          .catch(msg => {
            self.$message({
              type: "info",
              message: "服务器异常"
            });
            clearInterval(time);
            self.sendFisterCodeClickTrueOrFalse = true;
          });
      } else {
        self.$message({
          type: "success",
          message: "已发送验证码，请等待！"
        });
      }
    },
    // 第二步发送短信验证码
    sendTwoCodeClick() {
      var self = this;
      if (self.sendTwoCodeClickTrueOrFalse == true) {
        self.sendTwoCodeClickTrueOrFalse = false;
        self.time = 60;
        let time = setInterval(() => {
          self.time--;
          if (self.time == 0) {
            self.sendTwoCodeClickTrueOrFalse = true;
            clearInterval(time);
          }
        }, 1000);
        self
          .getapiSettingSendCode({
            phoneNumber: self.mobileVal
          })
          .then(data => {
            if (data.statusCode == 200) {
              self.$message({
                type: "success",
                message: "发送成功"
              });
              self.startTwo = true;
            } else if (data.statusCode == "200003") {
              self.$message({
                type: "info",
                message: data.statusMessage
              });
              self.sendTwoCodeClickTrueOrFalse = true;
              clearInterval(time);
              this.$router.push({
                path: "/login"
              });
            } else {
              self.$message({
                type: "info",
                message: "发送频繁请稍后再发送"
              });
              self.sendTwoCodeClickTrueOrFalse = true;
              clearInterval(time);
            }
          })
          .catch(msg => {
            self.sendTwoCodeClickTrueOrFalse = true;
            clearInterval(time);
            self.$message({
              type: "info",
              message: "服务器异常"
            });
          });
      }
    },
    validateOneFun() {
      var self = this;
      var regOne = new RegExp(/^\d{6}s*$/);
      var feiK = /^\s*$/g; //非空验证
      if (regOne.test(self.codeVal) == true) {
        self.isBlueCodeVal = false;
        self.isGrayCodeVal = true;
      } else {
        self.isBlueCodeVal = true;
        self.isGrayCodeVal = false;
      }
      if (self.isBlueCodeVal == false) {
        return false;
      } else {
        return true;
      }
    },
    // 下一步
    filterClick() {
      var self = this;
      if (self.validateOneFun() == true) {
      } else {
        if (self.filterClickTrueOrFalse == true) {
          self.filterClickTrueOrFalse = false;
          self
            .getapiSettingVerifyCode({
              phoneNumber: self.currentPhoneVal,
              code: self.codeVal
            })
            .then(data => {
              self.filterClickTrueOrFalse = true;
              if (data.statusCode == 200) {
                self.mainmanagFisterShow = false;
                self.titileName =
                  "修改完成后，绑定找回密码的手机号会修改为新手机号";
              } else {
                self.$message({
                  type: "info",
                  message: "验证码错误！"
                });
              }
            })
            .catch(msg => {
              self.filterClickTrueOrFalse = true;
              self.$message({
                type: "info",
                message: "服务器异常"
              });
            });
        }
      }
    },
    // 检索成员列表
    memberLists() {
      var self = this;
      self
        .getmembermemberquery({
          companyId: sessionStorage.getItem("ORGID"),
          queryName: self.phoneVal,
          appId: sessionStorage.getItem("getAppid"),
          memberId: sessionStorage.getItem("memberId"),
          deptId: ""
        })
        .then(data => {
          if (data.statusCode == 200) {
            if (data.data) {
              self.phoneLists = data.data;
            } else {
              self.phoneLists = [];
            }
          } else {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
          }
        })
        .catch(msg => {
          self.$message({
            type: "info",
            message: "服务器异常"
          });
        });
    },
    selectAccountClick(index) {
      var self = this;
      self.mobileVal = self.phoneLists[index].mobile;
      self.phoneVal = self.phoneLists[index].memberName;
      self.memberIdsVal = self.phoneLists[index].memberId;
      self.inputPhoneListShow = false;
    },
    validatesaveFun() {
      var self = this;
      var regOne = new RegExp(/^\d{6}s*$/);
      var feiK = /^\s*$/g; //非空验证
      if (regOne.test(self.twoCodeVal) == true) {
        self.isBlueCodeVal = false;
        self.isGrayCodeVal = true;
      } else {
        self.isBlueCodeVal = true;
        self.isGrayCodeVal = false;
      }
      if (self.isBlueCodeVal == false) {
        return false;
      } else {
        return true;
      }
    },
    // 完成
    saveClick() {
      var self = this;
      if (self.validatesaveFun() == true) {
      } else {
        if (self.saveClickTrueOrFalse == true) {
          self.saveClickTrueOrFalse = false;

          self
            .getapiSettingVerifyCode({
              phoneNumber: self.mobileVal,
              code: self.twoCodeVal
            })
            .then(data => {
              self.filterClickTrueOrFalse = true;
              if (data.statusCode == 200) {
                if (self.memberIdsVal == sessionStorage.getItem("memberId")) {
                  self.$message({
                    type: "success",
                    message: "你已经是主管理员"
                  });
                } else {
                  var obj = {
                    companyId: sessionStorage.getItem("ORGID"),
                    originId: sessionStorage.getItem("memberId"),
                    memberId: self.memberIdsVal
                  };
                  var object = JSON.stringify(obj);
                  self
                    .getwebOrgSettingChangeMaster(object)
                    .then(data => {
                      self.saveClickTrueOrFalse = true;
                      if (data.statusCode == 200) {
                        self.$message({
                          type: "success",
                          message: "更换主管理员成功"
                        });
                        self.$router.push({
                          path: "/login"
                        });
                      } else {
                        self.$message({
                          type: "info",
                          message: data.statusMessage
                        });
                      }
                    })
                    .catch(msg => {
                      self.saveClickTrueOrFalse = true;
                      self.$message({
                        type: "info",
                        message: "服务器异常"
                      });
                    });
                }
              } else if (data.statusCode == "200003") {
                self.$message({
                  type: "info",
                  message: data.statusMessage
                });
                this.$router.push({
                  path: "/login"
                });
              } else {
                self.$message({
                  type: "info",
                  message: "验证码错误！"
                });
              }
            })
            .catch(msg => {
              self.filterClickTrueOrFalse = true;
              self.$message({
                type: "info",
                message: "服务器异常"
              });
            });
        }
      }
    },
    ...mapActions([
      "getwebOrgSettingChangeMaster",
      "getmembermemberquery",
      "getapiSettingSendCode",
      "getapiSettingVerifyCode"
    ])
  }
};
</script>
<style scoped>
.mainmanag-but {
  width: 100%;
  height: 35px;
  display: flex;
  justify-content: center;
  margin-top: 25px;
}
.mainmanag-but > div {
  width: 65px;
  height: 35px;
  border-radius: 5px;
  color: #fff;
  background-color: #38adff;
  line-height: 35px;
  text-align: center;
  cursor: pointer;
}
.mainmanag-list small {
  color: red;
}
.mainmanagList-code {
  height: 35px;
  width: 95px;
  background-color: #38adff;
  text-align: center;
  line-height: 35px;
  color: #fff;
  margin-left: 30px;
  border-radius: 5px;
  cursor: pointer;
}
.inputPhoneLi {
  width: 100%;
  height: 45px;
  cursor: pointer;
  margin-top: 4px;
}
.inputPhoneLi:hover {
  background-color: #38adff;
  color: #fff;
}
.inputPhoneLi > div:nth-child(1) {
  height: 25px;
  line-height: 25px;
  font-size: 15px;
  margin-left: 10px;
}
.inputPhoneLi > div:nth-child(2) {
  height: 15px;
  line-height: 15px;
  font-size: 12px;
  margin-left: 10px;
  margin-top: 1px;
}
.inputPhoneList ul {
  display: flex;
  flex-wrap: wrap;
}
.inputPhoneList {
  position: absolute;
  top: 37px;
  width: 350px;
  left: 5px;
  background-color: #fff;
  border-radius: 5px;
  border: 1px solid #ccc;
  min-height: 200px;
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: scroll;
}
.mainmanagList-inputPhone {
  height: 35px;
  border-radius: 5px;
  line-height: 35px;
  width: 350px;
  position: relative;
}
.mainmanagList-inputPhone input {
  border: 1px solid #ccc;
  height: 35px;
  border-radius: 5px;
  line-height: 35px;
  padding-left: 10px;
  width: 350px;
}
.mainmanagList-inputCode input {
  height: 35px;
  border-radius: 5px;
  line-height: 35px;
  padding-left: 10px;
  width: 350px;
}
.mainmanagList-phone {
  border: 1px solid #ccc;
  background-color: #eee;
  height: 35px;
  border-radius: 5px;
  line-height: 35px;
  padding-left: 10px;
  width: 350px;
  margin-right: 10px;
}
.mainmanag-list > div:nth-child(1) {
  width: 185px;
  text-align: right;
}
.mainmanag-list > div:nth-child(2) {
  width: 350px;
  margin-left: 15px;
}
.mainmanag-list > div:nth-child(3) {
  min-width: 30px;
  margin-left: 15px;
  font-size: 12px;
  color: #ccc;
}
.mainmanag-list {
  margin-top: 20px;
  width: 100%;
  height: 35px;
  align-items: center;
  display: flex;
}
.install-main {
  min-height: 180px;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  width: 100%;
}
.install-main > div {
  width: 91%;
  min-height: 180px;
}
.install-title {
  height: 80px;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}
.install-title > div {
  width: 91%;
  background-color: rgba(56, 173, 255, 0.2);
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: #000;
  padding-left: 15px;
}

.mainmanag {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 100%;
  min-height: 497px;
}
.blueTostBorder {
  color: #38adff !important;
}

.grayTostBorder {
  color: #ccc;
}
.blueBorder {
  border: 1px solid #38adff !important;
}

.grayBorder {
  border: 1px solid #ccc;
}
</style>